<template>
  <!-- tabs 组件封装 -->
  <view class="tabs">
		<view 
			v-for="(item,index) in tabs" 
			:key="item.id" 
			class="tabs_item"
			:class="{ active: activeIndex === index }"
			@tap="changeTabsIndex(index)"
		>
			{{ item.text }}
		</view>
	</view>
</template>

<script>
	/* 
		注意：组件内的变量
			tabs
			activeIndex
	*/
	// uni-app 行为写这里
	export default {
		// props 父级传过来的数据
		props: ["tabs", "current"],
		// 组件内部自己的数据
		data(){
			return {
				activeIndex: 0
			}
		},
		// uni-app 组件支持的生命周期，与 vue 标准组件的生命周期相同。
		// 这里没有页面级的onLoad等生命周期。
		mounted(){
			// console.log(this.current);
			// Vue 规定 props 父传子数据，在组件内部不能被修改。
			// 把父组件传递过来的 props 数据更新到子组件内部的 data 中
			this.activeIndex = this.current;
			// console.log(this.activeIndex);
		},
		methods: {
			// 点击切换的业务是子组件的
			changeTabsIndex(index){
				// 改变索引影响子组件的选中状态
				this.activeIndex = index;
				// 调用父组件的 change 事件，传递子组件的索引值
				this.$emit('change', index);
			}
		}
	}
</script>

<style lang="less">
	.tabs{
		display: flex;
		justify-content:space-evenly;
		.tabs_item{
			width: 184rpx;
			height: 88rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-bottom: 4rpx solid transparent;
			box-sizing: border-box;
		}
		.active{
			border-color:#EA4350;
			font-weight: 700;
		}
	}
</style>
